<script lang="ts" setup>
import { ComponentEnum } from '@/enum/ComponentEnum'
import { NFlex } from 'naive-ui'
import { ObjectUtil } from '@/util/ObjectUtil'
import { PeaceForm } from '@/components/type/PeaceForm'

const props = withDefaults(
  defineProps<{
    peaceForm: PeaceForm
    index: {
      type: Number
      required: true
    }
    formModel: {
      type: Record<string, unknown>
      required: true
    }
  }>(),
  {
    show: false,
  },
)
const formParamObj = computed({
  get:()=> props.formModel,
})
const ifMatcherComponent = computed(() => {
  return (
    props.peaceForm.componentEnum &&
    props.peaceForm.componentEnum === ComponentEnum.INPUT_NUMBER &&
    ObjectUtil.isNullOrUndefined(props.peaceForm.peaceRender)
  )
})
</script>
<template>
  <template v-if="ifMatcherComponent && ObjectUtil.isNullOrUndefined(props.peaceForm.repeatRender)">
    <n-form-item :label="peaceForm?.title as string" :path="peaceForm?.key">
      <n-input-number
        v-model:value="formParamObj[peaceForm?.key] as string | [string, string] | null"
        :min="peaceForm.min??null"
        :max="peaceForm.max??null"
        :placeholder="('请输入' + peaceForm?.title) as string"
        style="width: 200px"
      />
    </n-form-item>
  </template>
  <template
    v-if="ifMatcherComponent && ObjectUtil.isNotNullAndUndefined(props.peaceForm.repeatRender)"
  >
    <n-form-item :label="peaceForm?.title as string">
      <template
        v-for="(numVal, numIndex) in props.peaceForm?.repeatRender?.num"
        :key="index + '_' + numIndex"
      >
        <n-flex>
          <template>
            <n-input-number
              v-model:value="
                formParamObj[props.peaceForm?.repeatRender?.returnFileNames[numIndex]] as
                  | string
                  | [string, string]
                  | null
              "
              :min="peaceForm.min??null"
              :max="peaceForm.max??null"
            >
            </n-input-number>
          </template>
        </n-flex>
      </template>
    </n-form-item>
  </template>
</template>
<style scoped></style>
